<template>
  <div>
    <div class="ios_top"></div>
    <div class="ios_bottom"></div>
    <div class="btc_top_info">
        <div class="btc_count">
            <img class="left" src="@/assets/left.png" @click="goback"></img>
            <div class="title">BTC减半倒计时</div>
        </div>

        <div class="rl_content">
            <div class="content">
              <div class="list dd">
                <div class="num">{{ day }}</div>
                <div class="dw">天</div>
              </div>
              <div class="list mm">
                  <div class="num">{{ hour }}</div>
                  <div class="dw">时</div>
              </div>
              <div class="list ss">
                  <div class="num">{{ minute }}</div>
                  <div class="dw">分</div>
              </div>
            </div>
        </div>

        <div class="rl_des_content">
            <div class="list">
              <div class="left">预计减半时间:</div>
              <div class="right">2028-04-14</div>
            </div>
            <div class="list">
              <div class="left">当前区块奖励:</div>
              <div class="right">3.125</div>
            </div>
            <div class="list">
              <div class="left">减半后区块奖励:</div>
              <div class="right">1.5625</div>
            </div>
        </div>
    </div>

    <div class="btc_half">
        <div class="btc_half_content">
            <div class="b_h_top">比特币历史减半时间价格</div>
            <div class="b_h_table">
                <div class="b_h_t_title">
                    <div class="list">次数</div>
                    <div class="list">减半时间</div>
                    <div class="list">挖矿奖励</div>
                    <div class="list">价格变化</div>
                </div>
                <div class="b_h_t_content">
                    <div class="list">第一次减半</div>
                    <div class="list">2012-11-28</div>
                    <div class="list">50→25</div>
                    <div class="list">$1→$260(23.6倍)</div>
                </div>
                <div class="b_h_t_content">
                    <div class="list">第二次减半</div>
                    <div class="list">2016-07-10</div>
                    <div class="list">25→12.5</div>
                    <div class="list">$430→$20000(46.5倍)</div>
                </div>
                <div class="b_h_t_content">
                    <div class="list">第三次减半</div>
                    <div class="list">2020-05-12</div>
                    <div class="list">12.5→6.25</div>
                    <div class="list">$3150→$68790(21.8倍)</div>
                </div>
                <div class="b_h_t_content">
                    <div class="list">第四次减半</div>
                    <div class="list">2024-04-20</div>
                    <div class="list">6.25→3.125</div>
                    <div class="list">小幅上涨</div>
                </div>
            </div>
        </div>
    </div>

    <div class="btc_introduce">
        <div class="content">
          <div class="btc_i_tab">
              <div class="bg" :class="article == 1 ? 'active' : ''"></div>
              <div class="list" @click="article = 0">
                介绍
              </div>
              <div class="list" @click="article = 1">
                文章
              </div>
          </div>
          
          <div class="btc_i_content" v-if="article == 0">
              <div class="btc_i_info" >
                  <div class="title">什么是比特币减半？</div>
                  <div class="info">
                    比特币减半又称为比特币区块奖励减半，是指产出新区块后所获得的奖励大约每隔四年减半一次。下次比特市减半预计发生在2028年4月。具体日期很难预测，因为取决于区块高度。每21万个区块就会发生一次减半，所以下一次减半预计发生在2028年4月区块高度达到1050,000时。
                  </div>
              </div>
              <div class="btc_i_info">
                  <div class="title">减半会带来什么？</div>
                  <div class="info">
                    减半后，每挖出一个区块，其对应的比特币奖励都只有减半前的奖励的一半。比特币在2009年问世后，区块奖励为50个比特币，根据出块速度，大约每4年奖励减半一次，最终总量恒定为2100万枚。 第五次减半完成后，区块奖励将有原来的3.125个变成1.5625个比特币。
                  </div>
              </div>
              <div class="btc_i_info">
                  <div class="title">BTC挖矿奖励为什么要减半？</div>
                  <div class="info">
                    根据市场的供求规律可知，假如不限制某样商品的流通数量，将容易出现恶性通货膨胀的情况，商品价格大大降低。同样地，假如比特币随处可见，其价值可能会越来越低。比特币网络中约10分钟就产出一个区块，一定数量的比特币将被源源不断地持续挖出。而设定比特币奖励每210,000个区块减半一次，可以有效逐步降低比特币的通胀率，从而防止恶性通货膨胀的发生。区块减半是比特币与传统货币的基本差异之一，体现了比特币的独特之处。
                  </div>
              </div>
          </div>

          <div class="btc_i_content" v-if="article == 1">
              <div class="btc_article_list" v-for="vo in articleList" @click="gotoarticle(vo.id)">
                  <div class="left">
                      <div class="title">{{vo.title}}</div>
                      <div class="article_info">
                          <div class="time">{{vo.authorName}} · {{vo.createTime | formatDate}}</div>
                          <div class="d_click"><div>{{vo.visit}}</div><img src="@/assets/ll.png"></div>
                      </div>
                  </div>
                  <img class="right" :src="vo.image"></img>
              </div>
              
          </div>

        </div>
    </div> 
      
  </div>
</template>

<script>
export default {
  name: 'index',
  components: {
    
    
  },
  data() {
    return {
      article:0,
      articleList:[],
      endTime: new Date("2028/04/14 08:00:00").getTime(),  // 结束时间
      day: 0,
      hour: 0,
      minute: 0,
      second: 0,
    }
  },
  filters: {
    // 自定义过滤器来格式化时间戳为年月日
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      // 根据需要补零
      const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
      return formattedDate;
    }
  },
  mounted(){
    this.countdown();
    this.getArticle()
  },
  methods: {
    countdown(){
      let nowTime = new Date().getTime();  // 当前时间
      let leftTime = this.endTime - nowTime;  // 剩余的毫秒数
      let d, h, m, s;
      if (leftTime >= 0) {
        d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
        m = Math.floor((leftTime / 1000 / 60) % 60);
        s = Math.floor((leftTime / 1000) % 60);
        this.day = d;  // 天
        this.hour = h;  // 小时
        this.minute = m;  // 分钟
        this.second = s;  // 秒
        // 每1000毫秒刷新一次
        setTimeout(this.countdown, 1000);
      }else{
        this.day = '0';  // 天
        this.hour = '0';  // 小时
        this.minute = '0';  // 分钟
        this.second = '00';  // 秒
      }
      
    },
    getArticle(){
      this.$axios.post(this.$url + '/xhj-gather-app/open/cms/article/page',{
        categoryId:'100099'
      }).then(res=>{
        this.articleList = res.data.data.list
      })
    },
    phoneType(){
      if (/(android)/i.test(navigator.userAgent)) {
          // 这是 Android 设备
          return 'Android'
      } else if (/(iphone|ipad)/i.test(navigator.userAgent)) {
          // 这是 iOS 设备
          return 'ios'
      } else {
          // 其他设备
         return null;
      }
    },
    gotoarticle(id){
        const type = this.phoneType();
        
        if(type == "Android"){
            let path = '/news/detail?PARAMETER_ID=' + id
            this.$dsbridge.callmethod('openNative', path, data => {})
        }else if(type == "ios"){
            let path = 'new-detail?id=' + id
            const param = {
              path,
            }
            this.$dsbridge.callmethod('callNativePage', JSON.stringify(param), data => {})
        }
    },
    goback(){
      this.$dsbridge.callmethod('finishNativePage','',res => {
          
      })
    },
  },
}
</script>

<style scoped lang="scss">
.ios_top{
  position: fixed;
  top:0;
  left: 0;
  width: 100vw;
  height: constant(safe-area-inset-top);
  height: env(safe-area-inset-top);
  background:#f89d42;
}
.ios_bottom{
  position: fixed;
  bottom:0;
  left: 0;
  width: 100vw;
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom);
  background:#F5F5F5;
}
.btc_top_info{
  width: 100%;
  height: 44rem;
  background: url(../assets/top_bg.png) no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: constant(safe-area-inset-top); /* 适用于iOS 11.2以后 */
  padding-top: env(safe-area-inset-top); /* 适用于iOS 11.2以后 */
  div{
    box-sizing: border-box;
  }
}
.btc_count{
  display: flex;
  align-items: center;
  width: 100%;
  height: 7.33rem;
  justify-content: center;
  padding:0 2rem;
  position: relative;
  img{
    width: 4rem;
    height: 4rem;
    position: absolute;
    left: 2rem;
  }
  .title{
    height: 4rem;
    font-weight: 500;
    font-size: 3rem;
    color: #FFFFFF;
    line-height: 4rem;
    text-align: center;
    font-style: normal;
  }
}
.rl_content{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3.5rem;
  .content{
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    row-gap: 5.33rem;
  }
  .list{
    width: 18.67rem;
    height: 16.67rem;
    background: url(../assets/rl_bg.png) no-repeat center center;
    background-size: 110%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .num{
      font-weight: bold;
      font-size: 6rem;
      color: #FFFFFF;
      text-align: center;
      font-style: normal;
    }
    .dw{
      font-weight: 400;
      font-size: 2rem;
      color: #FFFFFF;
      letter-spacing: 1px;
      text-align: center;
    }
  }
}

.rl_des_content{
  width: 94vw;
  height: 14.67rem;
  background: #FFFFFF;
  border-radius: 1.33rem;
  margin-top: 3rem;
  padding: 2rem;
  bottom: -10%;
  position: absolute;
  .list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.33rem;
    .left{
      font-weight: 400;
      font-size: 2rem;
      color: #24292E;
    }
    .right{
      font-weight: 400;
      font-size: 2rem;
      color: #24292E;
    }
  }
  .list:nth-child(1){
    margin-top: 0;
  }
}

.btc_half{
  margin-top: 1.67rem;
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  div{
    box-sizing: border-box;
  }
  .btc_half_content{
    width: 94vw;
    background: #FFFFFF;
    border-radius: 1.33rem;
    margin-top: 4rem;
    padding: 2rem;
    .b_h_top{
      height: 3.5rem;
      font-weight: 500;
      font-size: 2.5rem;
      color: #000000;
      line-height: 3.5rem;
    }
    .b_h_table{
      margin-top: 1.33rem;
      .b_h_t_title{
        display: grid;
        grid-template-columns:1fr 1fr 1fr 1.6fr;
        row-gap: 2.67rem;
        color: #89939E;
        .list{
          font-size: 1.67rem;
        }
        .list:nth-child(4){
          text-align: right;
        }
      }
      .b_h_t_content{
        display: grid;
        grid-template-columns:1fr 1fr 1fr 1.6fr;
        row-gap: 2.67rem;
        margin-top: 1.33rem;
        .list{
          font-size: 1.67rem;
          color: #24292E;
        }
        .list:nth-child(4){
          text-align: right;
        }
      }
    }
  }
}

.btc_introduce{
  margin-top: 1.67rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .content{
    width: 94vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    .btc_i_tab{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 7.33rem;
      border-radius: 1.33rem 1.33rem 0 0;
      position: relative;
      .bg{
        background: url(../assets/wz_bg.png) no-repeat;
        background-size:cover;
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 7.33rem;
        z-index: -1;
      }
      .active{
        transform: rotateY(180deg);
      }
      .list{
        width: 50%;
        height: 7.33rem;
        line-height: 7.33rem;
        text-align: center;
        border-radius: 1.33rem 1.33rem 0 0;
      }
    }
    .btc_i_content{
      background: #fff;
      border-radius:0 0 1.33rem 1.33rem;
      padding: 2rem;
      width: 100%;
      box-sizing: border-box;
      .btc_i_info{
        margin-bottom: 4rem;
        .title{
          height: 3.5rem;
          font-weight: bold;
          font-size: 2.5rem;
          color: #000000;
          line-height: 3.5rem;
          text-align: left;
          margin-bottom: 0.67rem;
        }
        .info{
          font-weight: 400;
          font-size: 2.33rem;
          color: #24292E;
          text-align: left;
        }
      }
      .btc_i_info:nth-last-child(1){
        margin-bottom: 0;
      }

      .btc_article_list{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2rem 0;
        border-bottom: 1px solid #EEEEEE;
        .left{
          display: flex;
          flex-direction: column;
          height: 11.33rem;
          justify-content: space-between;
          margin-right: 1.33rem;
          width: 66%;
          .title{
            width: 100%;
            height: 7.5rem;
            text-align: justify;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2; /* 行数 */
          }
          .article_info{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .time{
              font-weight: 500;
              font-size: 1.83rem;
              color: #89939E;
            }
            .d_click{
              display: flex;
              align-items: center;
              flex-direction:row-reverse;
              img{
                width: 2.27rem;
                height: 2.27rem;
                margin-right: 0.33rem;
              }
              div{
                font-size: 1.83rem;
                color: #89939E;
              }
            }
          }
        }
        .right{
          width: 17rem;
          height: 11.33rem;
          border-radius: 0.67rem;
        }
      }
    }
  }
}
</style>
